<template>
    <sdyHeader title="啥都有">
        <template #left>
            <van-icon class="cate-icon" name="wap-nav" />
        </template>
        <template #title>
            <van-search @focus="inSearchHandler" shape="round" background="rgb(200, 37, 25)" placeholder="请输入搜索关键词" />
        </template>
        <template #right>
            <span v-if="islogin">{{ nickName }}</span>
            <router-link v-else class="login" to="login">登录</router-link>
        </template>
    </sdyHeader>
    <!-- 轮播图 -->
    <sdyHomeBanner />

    <!-- 导航列表组件 -->
    <sdyHomeNavList />

    <!-- 首页热门秒杀 -->
    <sdyHomeHost></sdyHomeHost>

    <!-- 商品列表 -->
    <sdyHomeGoodesList></sdyHomeGoodesList>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
// 导入用户相关接口
import { getUserInfoApi } from '@/api/users'
// 导入banner组件
import sdyHomeBanner from './compontents/SdyHomeBanner.vue';
//导入导航列表组件
import sdyHomeNavList from './compontents/SdyHomeNavList.vue';
// 导入首页秒杀热门
import sdyHomeHost from './compontents/SdyHomeHot.vue';
// 导入商品列表
import sdyHomeGoodesList from './compontents/SdyHomeGoodsList.vue';
// 拿到编程式导航的路由控制器
import { useRouter } from 'vue-router';

const $router = useRouter()
// 点击搜索进入到search路由
const inSearchHandler = () => {
    // console.log($router);
    // 进行路由跳转
    $router.push('/search')
}

// 判断是否登录过，若登录显示昵称，未登录显示登录按钮
// 准备一个变量表示是否登陆过
const islogin = ref<boolean>(true)
// 准备一个变量表示用户名
const nickName = ref<string>('') || 'xxx'
// 验证token
const token = window.localStorage.getItem('token')
const userid = window.localStorage.getItem('userid')
const testToken = async () => {
    // console.log(token, userid);
    if (!token || !userid) {
        islogin.value = false
        return
    }
    // 若有id和token，去请求用户详细
    const res = await getUserInfoApi(userid)
    console.log(res);

    // 判断拦截器后返回的结果（10019为token无效，200为token有效）
    if (((res as unknown) as { code: string }).code === '10019') {
        islogin.value = false
        return
    }
    // 执行到这里表示登陆过
    islogin.value = true
    nickName.value = res.data[0].nickname
    // console.log(res.data[0].nickname);


}
onMounted(() => {
    testToken()

})

</script>
<style scoped lang="scss">
// 导入全局定义的变量（颜色）
.cate-icon {
    font-size: 30px;
    color: white !important;
}

.login {
    font-size: 20px;
    color: white !important;
}
</style>